<form [nzLayout]="'inline'" nz-form class="ant-advanced-search-form">
  <nz-form-item>
    <nz-form-label>{{l('container_no')}}</nz-form-label>
    <nz-form-control>
      <nz-input-group nzSuffixIcon="anticon">
        <input type="text" nz-input [(ngModel)]="routeParams.containerCode" [ngModelOptions]="{standalone: true}"
               [placeholder]="l('please_enter_container_no')">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('start_site')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="site" [(ngModel)]="routeParams.launchsiteId">
        <nz-option nzValue="" [nzLabel]="l('please_select_site')"></nz-option>
        <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item *ngIf="!currentSiteId">
    <nz-form-label>{{l('end_site')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="site1" [(ngModel)]="routeParams.destinationsiteId">
        <nz-option nzValue="" [nzLabel]="l('please_select_site')"></nz-option>
        <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('state')}}</nz-form-label>
    <nz-form-control>
      <nz-checkbox-group [ngModelOptions]="{standalone: true}" [(ngModel)]="checkStatusList"></nz-checkbox-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item class="control-area">
    <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
    <button nz-button (click)="reset()">{{l('reset')}}</button>
    <button nz-button (click)="getList()">{{l('refresh')}}</button>
    <button nz-button  (click)="exportToExcel()">{{l('export')}}</button>
    <button nz-button *ngIf='currentSiteId' (click)="viewArrivedPlan()">
      {{l('view_arrived_plan')}}
    </button>
  </nz-form-item>
</form>
<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false"
          [nzData]="tableHelper.items"
          [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount" [(nzPageIndex)]="tableHelper.pageIndex"
          [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize" (nzPageIndexChange)="load()"
          (nzPageSizeChange)="load()">
  <thead>
  <tr>
    <th nzWidth="100px" nzLeft="0px">{{l('serial_number')}}</th>
    <th>{{l('container_no')}}</th>
    <th>{{l('path_no')}}</th>
    <th>{{l('pda_no')}}</th>
    <th>{{l('lockset_no')}}</th>
    <th>{{l('car_no')}}</th>
    <th>{{l('start_site')}}</th>
    <th>{{l('end_site')}}</th>
    <th>{{l('time_of_shipment')}}</th>
    <th>{{l('expected_arrived_time')}}</th>
    <th>{{l('real_arrived_time')}}</th>
    <th>{{l('container_state')}}</th>
    <th>{{l('cargo_information')}}</th>
    <th>{{l('logistics_information')}}</th>
    <th>{{l('warn_info')}}</th>
    <th nzRight="0px">{{l('view_address')}}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of ajaxTable.data;let i = index">
    <td nzLeft="0px">{{i++1}}</td>
    <td>{{data.containerCode}}</td>
    <td>{{data.routeCode}}</td>
    <td>{{data.handsetCode}}</td>
    <td>{{data.lockCode}}</td>
    <td>{{data.platenumber}}</td>
    <td>{{data.launchsiteName}}</td>
    <td>{{data.destinationsiteName}}</td>
    <td>{{data.launchTime|momentFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
    <td>{{data.expectedarriveTime|momentFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
    <td>{{data.arriveTime|momentFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
    <td>{{l(data.containerStatusName)}}</td>
    <td class="only-icon"><a (click)="showProductModal(data.containerId)" class="ag_receipt"
                             [title]="l('cargo_information')"></a></td>
    <td class="only-icon"><a (click)="showLogisticModal(data.containerId)" class="ag_local_shipping"
                             [title]="l('logistics_information')"></a></td>
    <td>
      <a *ngIf="data.hasWarn" (click)="showWarnInfo(data.id)">{{l('view_warn')}}</a>
      <a *ngIf="!data.hasWarn&&data.noticestatus>=2">{{l('nothing')}}</a>
      <a *ngIf="!data.hasWarn&&data.noticestatus==1"></a>
    </td>
    <td nzRight="0px">
      <a (click)="showAddress(data.id,data.lockCode)"
         *ngIf="data.containerStatus==3">{{l('view_real_address')}}</a>
      <nz-divider nzType="vertical" *ngIf="data.containerStatus==3&&data.containerStatus==5"></nz-divider>
      <a (click)="showHistoryInfo(data.id)" *ngIf="data.containerStatus==5">{{l('view_history_path')}}</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>
<app-logistic-detail-modal #logisticDetailModal></app-logistic-detail-modal>
<app-product-detail-modal #productDetailModal></app-product-detail-modal>
<app-warn-address-list-modal #reportAddressModal></app-warn-address-list-modal>
<app-real-online-modal #realOnlineModal></app-real-online-modal>
<app-container-history-path-modal #historyPathModal></app-container-history-path-modal>
<app-view-arrived-plan-modal #arrivedPlanModal></app-view-arrived-plan-modal>
